import {
    useIntersectionObserver,
    useIntervalFn
} from '@vueuse/core'
import {
    ref,
    onUnmounted
} from 'vue'
import dayjs from 'dayjs'
/**
 * 实现数据懒加载
 * @param {Function} apiFn  外部传递的api接口函数
 * @returns 数据和dom对象方便外部挂载
 */
export const useLazyData = (apiFn) => {
    // 需要
    // 1. 被观察的对象
    // 2. 不同的API函数
    // 监听的dom对象
    const target = ref(null)

    // 需要获取的数据
    const result = ref([])
    const {
        stop
    } = useIntersectionObserver(
        target,
        ([{
            isIntersecting
        }]) => {
            if (isIntersecting) {
                stop()

                // 调用API获取数据
                apiFn().then(data => {
                    result.value = data.result
                })
            }
        }
    )

    // 返回--->数据（dom,后台数据）
    return {
        target,
        result
    }
}

/**
 * 支付时间的倒计时
 */
export const usePayTime = () => {
    // 实现过期时间的倒计时功能
    const {
        pause,
        resume
    } = useIntervalFn(() => {
        time.value--
            timeText.value = dayjs.unix(time.value).format('mm分钟ss秒')
        if (time.value <= -1) {
            pause()
        }
    }, 1000, false)

    // 倒计时的时间
    const time = ref(0)

    // 倒计时提示信息
    const timeText = ref(null)
    onUnmounted(() => {
        pause()
    })

    // 开启定时器
    const start = cutdown => {
        // 倒计时的初始值
        time.value = cutdown
        timeText.value = dayjs.unix(time.value).format('mm分钟ss秒')
        resume()
    }
    return {
        start,
        timeText
    }
}